<template>
  <div class="my-card m-40px p-30px rounded-2xl shadow-xl">
    <div ref="chartRef" :style="{ height: '350px' }"></div>
  </div>
</template>

<script setup lang="ts">
  import { useECharts } from '@/hooks/web/useECharts';
  import { onMounted, ref, Ref } from 'vue';
  import type { EChartsOption } from 'echarts';

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  const chartOptions: EChartsOption = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ],
      },
    ],
  };

  onMounted(() => {
    setOptions(chartOptions);
  });
</script>

<style scoped></style>
